<template>
	<view class="xilu">
		<view class="page-foot bg-normal plr25" @click.stop="orderVerify()">
			<view class="xilu_foot_nav flex-box pl30">
				<view class="flex-grow-1">
					<view class="fs28 col9 lh40">合计</view>
					<view class="flex flex-align-end">

						<view class="fs34 col2 fw500"
							v-if="chooseOnceList.length == 0 & is_type != 3 && coupon_price > 0 && chooseClassTimeList.length > 0">
							¥{{ choose_pay_price - coupon_price  || 0}}
						</view>
						<view class="fs34 col2 fw500" v-if="chooseOnceList.length == 0 & is_type != 3 && coupon_price <= 0">
							¥{{ choose_pay_price  || 0}}
						</view>
						<view class="fs34 col2 fw500" v-if="chooseOnceList.length  > 0 & is_type != 3">多次课程包抵扣</view>
						<view class="fs34 col2 fw500" v-if="is_type == 3">¥{{ pay_price || 0}}</view>
					</view>
				</view>
				<view class="xilu_foot_nav_btn" v-if="chooseOnceList.length  > 0">立即抵扣</view>
				<view class="xilu_foot_nav_btn" v-else>立即支付</view>
			</view>
		</view>
		<view class="container">
			<view class="pr">
				<swiper class="xilu_swiper_info" @change="swiperTab" :current="current" :circular="true"
					:autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(vo,index) in thumb_images">
						<image :src="vo" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="xilu_swiper_dot">{{ current + 1 }}/{{ thumb_images.length }}</view>
				<image v-if="web_url" :src="web_url+'/uniapp_image/xilu_mask.png'" mode="aspectFill" class="xilu_mask">
				</image>
			</view>
			<view class="pr z5 plr25 pb60">
				<view class="xilu_introduce_box">
					<view class="fs44 col3 lh62" v-if="is_type == 3">{{info.camp.title || ''}}</view>
					<view class="fs44 col3 lh62" v-else>{{info.course.title || ''}}</view>
					<view class="mt40 flex-box">
						<image src="@/static/images/xilu_icon10.png" mode="aspectFill" class="ico28"></image>
						<view class="pl5 fs28 col3 flex-grow-1">教练：{{info.coach.coach_name || ''}}</view>
					</view>
					<view class="mt40 flex-box">
						<image src="@/static/images/xilu_icon11.png" mode="aspectFill" class="ico28"></image>
						<view class="pl5 fs28 col3 flex-grow-1" v-if="is_type == 3">

							<template v-for="(vo,index) in info.plans">
								{{vo.week || ''}} {{vo.day_start_at || ''}}～{{vo.day_end_at || ''}}
							</template>
						</view>
						<view class="pl5 fs28 col3 flex-grow-1" v-else>
							教练等级：{{ info.coach.group_name}}
						</view>
					</view>
					<view class="mt40 flex">
						<image src="@/static/images/xilu_icon12.png" mode="aspectFill" class="ico28 mt6"></image>
						<view class="pl5 fs28 col3 flex-grow-1 lh40 m-ellipsis-l2 pr40">教练评分：{{info.coach.star || ''}}
						</view>
					</view>

				</view>
				
				<view class="xilu_box">
					<view class="xilu_pay_item flex-box plr30" :class="chooseOnceList.length > 0 ? 'ac' :''"
						@click.stop="chooseOnce(once)">
						<image src="@/static/images/xilu_icon15.png" mode="aspectFill" class="ico40"></image>
						<view class="flex-grow-1 plr20 fs32 col3">选择多次课程包支付</view>
					</view>
					<template v-if="chooseOnceList.length > 0">
						<view v-for="(item, index) in chooseOnceList"
							class="xilu_pay_item col3 flex-between flex-box plr30">
							<view>{{item.pay_body}} 剩余{{item.wrap_count - item.code_num}}次</view>
							<view class="delete-btn" @click.stop="closeOnce(index)">×</view>
						</view>
					</template>
				</view>
				<view class="xilu_box">
					<view v-if="userInfo && userInfo.account > 0"
						:class="pay_type == 1 && chooseOnceList.length <= 0 ? 'xilu_pay_item ac flex-box plr30' : 'xilu_pay_item flex-box plr30'"
						@tap="choosePayType(1)">
						<image src="@/static/images/xilu_icon13.png" mode="aspectFill" class="ico40"></image>
						<view class="flex-grow-1 plr20 fs32 col3">会员卡支付</view>
						<view class="fs30 col2">余额：{{userInfo.account || 0}}元</view>
					</view>
					<view :class="pay_type == 2 && chooseOnceList.length <= 0 ? 'xilu_pay_item flex-box ac plr30' : 'xilu_pay_item flex-box plr30'"
						@tap="choosePayType(2)">
						<image src="@/static/images/xilu_icon14.png" mode="aspectFill" class="ico40"></image>
						<view class="flex-grow-1 plr20 fs32 col3">微信支付</view>
					</view>
					<!-- <view :class="pay_type == 3 ? 'xilu_pay_item ac flex-box plr30' : 'xilu_pay_item flex-box plr30'"
						@tap="choosePayType(3)">
						<image src="@/static/images/xilu_icon15.png" mode="aspectFill" class="ico40"></image>
						<view class="flex-grow-1 plr20 fs32 colf">次课包抵扣</view>
						<view class="fs30 col2">剩余：{{code_num}}次</view>
					</view> -->
				</view>
				<view class="xilu_box">
					<view class="ptb30 bb flex-box">
						<view class="flex-grow-1 col9 fs28">总价</view>
						<view class="fs30 col3">{{total_price || 0}}元</view>
					</view>
					<picker mode="selector" :value="qindex" :range="coupons" @change="changeCoupons">
						<view v-if="coupons.length > 0" @click.stop="chooseCoupon(coupons)">
							<view class="pt30 flex-box">
								<view class="flex-grow-1 col9 fs28">代金劵</view>
								<view class="fs30 col2">{{coupon_price > 0 ? ('-' + coupon_price + '元') : '请选择'}}</view>
								<image src="@/static/images/arrow_white.png" mode="aspectFill" class="ico30 ml10">
								</image>
							</view>
						</view>
					</picker>
				</view>
				<view class="xilu_box" v-if="info.course.content">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">多次课程包</view>
					<template v-if="classOnceList.length > 0">
						<view style="color: #fff;">
							<class-once :classOnceList="classOnceList"></class-once>
						</view>
					</template>
					
					<template v-else>
						<empty-data :tips="'暂无多次课程包'" :lineHeight="100"></empty-data>
					</template>
				</view>
				<view class="xilu_box" v-if="is_type == 3 && info.sign_count > 1">

					<view class="bb flex">
						<view class="flex-grow-1 col9 fs28">人数</view>
						<view class="pl20" style="max-width: 85%;">

							<template v-for="(vo,index) in info.sign_count">
								<view :class="(num == (index + 1)) ? 'xilu_choose_link ac' : 'xilu_choose_link'"
									@tap="chooseNum((index+1))">{{index + 1}}人</view>
							</template>

						</view>
					</view>
				</view>
				<div class="xilu_box dark-theme" v-if="is_type != 3">
					<!-- 日期导航 -->
					<view class="ptb30 bb flex-box date-nav">
						<template v-for="(vo,keys) in classTimeList">
							<view
								:class="choose_date == vo.day_date ? 'xilu_date_nav_item active' : 'xilu_date_nav_item'"
								@tap="chooseDate(vo.day_date)">
								<view>{{vo.day || ''}}</view>
								<view class="mt5">{{vo.week || ''}}</view>
							</view>
						</template>
					</view>

					<!-- 可选课程列表 -->
					<view class="chooseTimeListContent">
						<template v-if="choose_time_list_content.length > 0">
							<div class="time-option" v-for="item in choose_time_list_content" @click="addClass(item)">
								<view class="option-text">
									<text class="date">{{ item.class_time_txt }}
										{{item.start_at}}-{{item.end_at}}</text>
									<text class="price">{{ item.course_price }}元</text>
								</view>
								<view class="add-icon">+</view>
							</div>

						</template>
						<template v-else>
							<view class="empty-data" :style="[{'line-height':100 + 'rpx'}]">这天没有课程</view>
						</template>
					</view>
					<!-- 已选课程列表 -->
					<template v-if="chooseClassTimeList.length > 0">
						<view class="ptb30 bb flex-box selected-header">
							<view class="flex-grow-1 fs36 colblue fw700">已选课程 ({{ chooseClassTimeList.length }}节)</view>
							<view class="total-price">总计: {{ choose_pay_price }}元</view>
						</view>

						<view class="chooseClassTimeList">
							<view class="selected-item" v-for="(item, index) in chooseClassTimeList" :key="index">
								<view class="item-text">
									<text class="date">{{ item.class_time_txt }}
										{{item.start_at}}-{{item.end_at}}
										</text>
									<text class="price">{{ parseFloat(item.course_price).toFixed(2) }}元</text>
								</view>
								<view class="delete-btn" @click.stop="closeTime(index)">×</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="empty-tips col-gray">
							<view>暂未选择任何课程</view>
						</view>
					</template>
				</div>
				<view class="xilu_box">
					<input v-model="kid_name" placeholder="孩子姓名(必填)" />
					<input v-model="kid_age" placeholder="孩子年龄(必填)" type="number" />
					<input v-model="parent_phone" placeholder="家长电话" type="number" disabled="true"/>
					<textarea v-model="kid_info" placeholder="现阶段介绍" />
					<textarea v-model="kid_wish" placeholder="学习期望" />
				</view>
				
				<view class="xilu_box" v-if="tips_content">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">退课须知：</view>
					<view class="fs28 col9 lh40">
						<mp-html :content="tips_content"></mp-html>
					</view>
				</view>
			</view>
		</view>
		<u-authorize @onAuthCancel="onAuthCancel($event)" @onAuthConfirm="onAuthConfirm($event)"
			:popupStatus="auth_status" :isAuth="2"></u-authorize>
	</view>
</template>

<script>
	const app = getApp();
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				current: 0,
				thumb_images: [],
				kid_name:'',
				kid_age:'',
				parent_phone:'',
				kid_info:'',
				kid_wish:'',
				coupons: [],
				user_coupon_id: 0,
				userInfo: null,
				info: null,
				is_type: 0,
				num: 1,
				price: 0.00,
				total_price: 0.00,
				pay_price: 0.00,
				coupon_price: 0.00,
				pay_type: 2,
				auth_status: false,
				tips_content: '',
				web_url: '',
				code_num: 1,
				once: [],
				chooseOnceList: [],
				once_num: '',
				classTimeList: [],
				chooseClassTimeList: [],
				choose_date: "",
				choose_time_list_content: [],
				course_id: '',
				isPay: true,
				need_pay_num: '',
				chooseId: '',
				info:'',
				classOnceList: []
			}
		},
		computed: {
			choose_pay_price() {
				return this.chooseClassTimeList.reduce((total, item) => {
					return total + parseFloat(item.course_price || 0);
				}, 0).toFixed(2); // 保留两位小数
			}
		},
		methods: {
			
			closeTime(index) {
				this.chooseClassTimeList.splice(index, 1);
				uni.showToast({
					title:'剩余已选课程'+this.chooseClassTimeList.length+'节'
				})
			},
			closeOnce(index) {
				this.chooseOnceList.splice(index, 1)
			},
			addClass(val) {
				// this.chooseClassTimeList.push(day_date)
				if (!this.chooseClassTimeList.some(item => item.id === val.id)) {
					this.chooseClassTimeList.push(val);

				}
				uni.showToast({
					title:'已选'+this.chooseClassTimeList.length+'节课',
				})
				console.log(this.chooseClassTimeList);
			},
			chooseDate(day_date) {
				this.choose_date = day_date;
				// this.choose_time_list_content = day_date
				this.getDetail(this.course_id, this.is_type, this.choose_date)
			},


			swiperTab(e) {
				this.current = Number(e.target.current)
			},
			//选择优惠券
			chooseOnce(once) {
				let _this = this;
				uni.navigateTo({
					url: '../my_once/my_once',
					events: {
						// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
						reloadCoupon: (params) => {
							_this.chooseOnceList[0] = params
							_this.getDetail(this.course_id, this.is_type, this.choose_date)
							console.log('222222', params)
							console.log('222222', _this.chooseOnceList[0])
						},
					},
					success: (res) => {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('chooseCoupon', {
							once_list: once
						});
					}
				})
				// this.$api.navigate('../my_once/my_once', function(res) {
				// 	res.eventChannel.emit('chooseCoupon', {
				// 		once_list: once
				// 	});
				// 	res.eventChannel.on("reloadCoupon", function(params) {
				// 		console.log(params);

				// 		_this.chooseOnceList[0] = params.couponInfo
				// 		console.log(_this.chooseOnceList);

				// 	});
				// });
			},
			chooseCoupon(coupons) {
				let _this = this;

				this.$api.navigate('../coupons_list/coupons_list', function(res) {
					res.eventChannel.emit('chooseCoupon', {
						coupons_list: coupons
					});
					res.eventChannel.on("reloadCoupon", function(params) {
					
						_this.coupon_price = params.couponInfo.discount_amount || 0.00;
						_this.user_coupon_id = params.couponInfo.id || 0;
						console.log('user_coupon_id', _this.user_coupon_id);
						console.log('couponInfo', params.couponInfo);
						let total_price = _this.total_price;
						let pay_price = parseFloat(total_price) > parseFloat(_this.coupon_price) ? (
							parseFloat(total_price) - parseFloat(_this.coupon_price)) : 0;
						_this.pay_price = pay_price.toFixed(2);
					});
				});
			},
			//授权取消
			onAuthCancel(e) {
				this.auth_status = false;
				this.$api.toast('取消授权，可能会使部分服务不能用，或页面信息不完整')
			},
			//授权成功
			onAuthConfirm(e) {
				this.auth_status = false;
				this.createOrder();
			},
			//选择报名人数
			chooseNum(num) {
				this.num = num;
				this.getTotalPrice();
			},
			//选择支付类型
			choosePayType(pay_type) {
				// let pay_price =parseFloat(this.pay_price);
				// let user_account = parseFloat(this.userInfo.account);
				// if (pay_type == 1 && pay_price > user_account) {
				// 	this.$api.toast('余额不足');
				// }

				// if(pay_type == 3 && this.code_count > 0) {
				// 	this.pay_price = 0
				// 	this.$api.toast('暂无次课包');
				// }
				// this.pay_type = pay_type
				let pay_price = Number(this.pay_price);
				let user_account = Number(this.userInfo.account);
				let code_num = this.userInfo.code_num || 0;
				
				if (pay_type == 1 && pay_price > user_account) {
					this.$api.toast('余额不足');
				} else if (pay_type == 3 && code_num <= 0) {
					this.$api.toast('多次课程包次数不足');
				} else {
					this.pay_type = pay_type;
					// 如果选择了次课包，立即设置支付金额为0
					if (pay_type == 3) {
						this.pay_price = "0.00";
					} else {
						// 其他支付方式，重新计算金额（如会员卡/微信）
						this.getTotalPrice();
					}
				}
			},
			//获取详情
			getDetail(id, is_type, choose_date) {
				let url = '';
				let _this = this;
				if (is_type == 3) {
					url = '/addons/xilufitness/course/getCampDetail';
				} else {
					url = '/addons/xilufitness/course/detail';
				}
				this.$http({
					url: url,
					data: {
						id: id,
						choose_date: choose_date || ''
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.classOnceList = res.data.info.wrap_list;
						_this.once = res.data.info.wrap || null
						_this.info = res.data.info;
						_this.is_type = is_type;
						if (is_type == 3) {
							_this.price = res.data.info.camp_price || 0.00;
							_this.thumb_images = res.data.info.camp.xilufitness_urls.thumb_images || [];
						} else {
							_this.classTimeList = res.data.classTimeList
							_this.choose_time_list_content = res.data.list
							_this.choose_date = _this.choose_date || res.data.classTimeList[0].day_date
							_this.price = res.data.info.course_price || 0.00;
							_this.thumb_images = res.data.info.course.xilufitness_urls.thumb_images || [];
						}
						_this.getTotalPrice();
					}
				}).catch(error => {
					console.log('orderDedetail', error);
				})
			},
			//获取用户信息
			getUserDetail() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/user/index',
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						_this.userInfo = res.data.info;
						_this.parent_phone = res.data.info.mobile;
						_this.kid_name = res.data.info.kidinfo.kid_name;
						_this.kid_age = res.data.info.kidinfo.kid_name;
						_this.kid_info = res.data.info.kidinfo.kid_info;
						_this.kid_wish = res.data.info.kidinfo.kid_wish;
					}
				}).catch(error => {
					console.log('userError', error);
				})
			},
			//优惠券列表
			getCouponList() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/coupon/getOrderCoupon',
					data: {
						total_price: _this.total_price
					},
					method: 'post'
				}).then(res => {
					if (res.code == 1) {
						_this.coupons = res.data.list || []
					}
				}).catch(error => {
					console.log('couponError', error);
				})
			},

			//获取总价
			getTotalPrice() {
				// let _this = this;
				// let num = this.num || 1;
				// let price = this.price || 0.00;
				// let total_price = parseFloat(price) * parseInt(num);
				// _this.total_price = total_price.toFixed(2);
				// _this.pay_price = total_price.toFixed(2);
				// _this.getCouponList();
				if (this.is_type == 3) {
					let num = this.num || 1;
					let price = this.price || 0.00;
					this.pay_price = parseFloat(price) * parseInt(num)
					this.pay_price = this.pay_price.toFixed(2);
				} else {
					let num = this.num || 1;
					let price = this.price || 0.00;
					let total_price = parseFloat(price) * parseInt(num);

					this.total_price = total_price.toFixed(2);
					// 如果当前选择的是次课包抵扣，则支付金额为0
					if (this.pay_type == 3 && this.userInfo.code_num > 0) {
						this.pay_price = "0.00";
					} else {
						this.pay_price = total_price.toFixed(2);
					}
					this.getCouponList();
				}

			},
			orderVerify(){
				let _this = this;
				if(_this.pay_type == 1){
					uni.showModal({
						title:"提示",
						content:"您确认使用会员卡支付吗？",
						success: function (res) {
							if (res.confirm) {
								_this.createOrder()
							} else if (res.cancel) {
								uni.navigateBack(1);
							}
						}
					})
				}else{
					_this.createOrder()
				}
			},
			//创建订单
			createOrder() {
				if (this.chooseOnceList.length > 0) {
					this.once_num = this.chooseOnceList[0].wrap_count - this.chooseOnceList[0].code_num
					this.need_pay_num = this.chooseClassTimeList.length
					console.log(this.once_num, this.need_pay_num);
					if (this.once_num >= this.need_pay_num) {
						this.isPay = false
						this.need_pay_num = 0
						this.pay_price = (this.pay_price * this.need_pay_num).toFixed(2)
					} else {
						console.log(this.isPay);
						this.isPay = true
						this.pay_price = (this.pay_price * this.need_pay_num).toFixed(2)
						console.log(this.isPay);
					}
					if (this.isPay) {
						this.$api.modal('温馨提示', ('多次课程包次数不够'), function(ret) {

						}, false)
						return
					}
				}



				let _this = this;
				let token = this.$api.getCache('token');
				if (!token) {
					this.auth_status = true;
				} else {
					if (_this.chooseOnceList.length > 0) {
						_this.pay_type = 5
					}
					let list_id = this.chooseClassTimeList.map(item => {
						return item.id
					})
					// 校验（可以根据需要自行加严谨）
					if (!this.kid_name || !this.kid_age || !this.parent_phone) {
						uni.showToast({
							title: '请完善预约人信息',
							icon: 'none'
						});
						return;
					}
					
					console.log(list_id);
					this.$http({
						url: '/addons/xilufitness/order/createOrder',
						data: {
							id: _this.info.id || 0,
							// num: _this.need_pay_num,
							num: _this.chooseClassTimeList.length,
							is_type: _this.is_type || 0,
							user_coupon_id: _this.user_coupon_id || 0,
							pay_type: _this.pay_type || 2,
							wrap_id: _this.chooseOnceList[0]?.id || 0,
							list_id: list_id,
							kid_name: _this.kid_name,
							kid_age: _this.kid_age,
							parent_phone: _this.parent_phone,
							kid_info: _this.kid_info,
							kid_wish: _this.kid_wish,
						},
						method: 'post'
					}).then(res => {
						if (res.code == 1) {
							_this.toPay(res.data);
						} else {
							_this.$api.modal('温馨提示', (res.msg || '下单失败'), function(ret) {

							}, false)
						}
					}).catch(error => {
						console.log('orderError', error);
					});
				}
			},
			//去支付
			toPay(data) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/pay/index',
					data: {
						...data,
						wrap_id: _this.chooseOnceList[0]?.id || 0
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						if (data.pay_type == 2) {
							//发起微信支付
							_this.wechatPay(res.data, data.order_type);
						} else {
							//到支付成功界面
							_this.$api.navigate('../pay_success/pay_success');
						}
					} else {
						_this.$api.modal('温馨提示', res.msg || '支付失败', function() {}, false);
					}
				}).catch(error => {
					console.log('payError', error);
				})
			},
			//发起微信支付
			wechatPay(data, order_type) {
				let _this = this;
				this.$api.toPay(data, order_type, function(res) {
					if (order_type == 0) {
						//会员充值
						_this.$api.navigate('../member_order/member_order');
					} else {
						//到支付成功界面
						_this.$api.navigate('../pay_success/pay_success');
					}
				}, function(error) {
					_this.$api.modal('温馨提示', '支付失败', function() {}, false);
					console.log('payError', error);
				})

			},
			//退课须知
			getTips() {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/cms/detail',
					data: {
						is_type: 3
					},
					method: 'GET'
				}).then(res => {
					if (res.code == 1) {
						_this.tips_content = (res.data.info && res.data.info.content) ? res.data.info.content : '';
					}
				}).catch(error => {
					console.log('tipsError', error);
				});
			},
		},
		onLoad(options) {
			this.web_url = webConfig.base_url || '';
			this.course_id = options.id
			this.is_type = options.is_type
			
			
			
			this.getDetail((options.id), (options.is_type || 0));
			this.getUserDetail();
			this.getTips();
			let _this = this
			if(options.pay_type && options.pay_type==5){
				uni.getStorage({
				  key: 'packageinfo',
				  success: function(res) { 
					  console.log('获取成功', res.data); 
					  _this.chooseOnceList[0] = res.data
				  },
				  fail: function(err) { console.log('获取失败', err); }
				});
				// this.chooseOnceList[0] = options.params
				console.log(_this.chooseOnceList[0]);
				
			}


		}
	}
</script>

<style lang="scss" scoped>
	.dark-theme .total-price {
		color: #ffcf00;
		font-size: 18px;
		font-weight: bold;
		display: flex;
		align-items: center;
	}

	.dark-theme .total-price::before {
		content: "¥";
		font-size: 0.8em;
		margin-right: 2px;
	}

	.dark-theme .selected-header {
		position: relative;
	}

	.dark-theme .selected-header::after {
		content: "";
		position: absolute;
		left: 0;
		bottom: -1px;
		width: 100%;
		height: 1px;
		background: linear-gradient(90deg, transparent, #1890ff, transparent);
		opacity: 0.3;
	}

	.dark-theme .price {
		color: #52c41a;
		/* 改为绿色表示正数金额 */
		min-width: 60px;
		text-align: right;
	}

	.empty-data {
		text-align: center;
		line-height: 150rpx;
		color: #999999;
	}

	/* 暗色主题样式 */
	.dark-theme {
		// background-color: #1a1a1a;
		color: #e0e0e0;
	}

	.dark-theme .xilu_date_nav_item {
		color: #333;
	}

	.dark-theme .xilu_date_nav_item.active {
		background-color: #ffcf00;
		color: #000;
		border-color: #ffcf00;
	}

	.dark-theme .chooseTimeListContent .time-option {
		background-color: #E8EEFE;
		border-left: 4px solid #ffcf00;
	}
	.option-text .date{
		color:#333;
	}
	.dark-theme .chooseTimeListContent .time-option:hover {
		background-color: #E8ffff;
	}

	.dark-theme .chooseClassTimeList {
		background-color: #2d2d2d;
	}

	.dark-theme .chooseClassTimeList .selected-item {
		background-color: #E8EEFE;
		border-left: 3px solid #ff4d4f;
	}
	.selected-item .item-text .date{
		color:#333
	}
	.dark-theme .delete-btn {
		color: #ff4d4f;
	}

	.dark-theme .delete-btn:hover {
		background-color: rgba(255, 77, 79, 0.2);
	}

	.dark-theme .total-price {
		color: #ffcf00;
	}

	.dark-theme .add-icon {
		color: #52c41a;
	}

	/* 通用组件样式 */
	.xilu_box1 {
		border-radius: 8px;
		padding: 16px;
		max-width: 100%;
		margin: 0 auto;
	}



	.date-nav {
		overflow-x: auto;
		scrollbar-width: none;
		background-color: #E8EEFE;
		border-radius: 20rpx;
	}

	.date-nav::-webkit-scrollbar {
		display: none;
	}

	.xilu_date_nav_item {
		// min-width: 70px;
		// padding: 12px 8px;
		text-align: center;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s ease;
		flex-shrink: 0;
		margin-left: 30rpx !important;
	}

	.xilu_date_nav_item .day {
		font-size: 16px;
		font-weight: 500;
	}

	.xilu_date_nav_item .week {
		font-size: 12px;
		opacity: 0.8;
	}

	.chooseTimeListContent {
		margin-top: 20px;
	}

	.time-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 16px;
		margin-bottom: 10px;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s ease;
	}

	.option-text {
		display: flex;
		gap: 15px;
	}

	.add-icon {
		font-size: 20px;
		font-weight: bold;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selected-header {
		margin-top: 20px;
		padding-bottom: 10px;
		border-bottom: 1px solid #3d3d3d;
	}

	.chooseClassTimeList {
		margin-top: 10px;
		border-radius: 6px;
		overflow: hidden;
	}

	.selected-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12px 16px;
		transition: all 0.2s ease;
	}

	.item-text {
		display: flex;
		gap: 15px;
	}

	.delete-btn {
		font-size: 18px;
		font-weight: bold;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		cursor: pointer;
		transition: all 0.2s;
	}

	.total-price {
		font-size: 18px;
		font-weight: bold;
	}

	.date {
		min-width: 120px;
	}

	.price {
		color: #ffcf00;
		font-weight: 500;
	}

	.xilu {
		&_date_nav {
			width: 700rpx;
			height: 145rpx;
			background: #E8EEFE;
			border-radius: 20rpx;

			&_item {
				width: 58rpx;
				height: 110rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #333;
				margin-left: 42rpx;
				line-height: 40rpx;
				text-align: center;
				padding-top: 13rpx;
			}

			&_item:first-child {
				margin-left: 16rpx;
			}

			&_item.active {
				background: #FFCF00;
				border-radius: 29rpx;
				color: #101010;
				line-height: 40rpx;
			}
		}

		&_swiper_info {
			width: 100%;
			height: 750rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&_mask {
			width: 100%;
			height: 380rpx;
			position: absolute;
			bottom: 0;
			z-index: 3;
			left: 0;
		}

		&_swiper_dot {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 20rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			right: 25rpx;
			bottom: 410rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			z-index: 4;
		}

		&_introduce_box {
			width: 700rpx;
			height: 412rpx;
			margin-top: -380rpx;
			background: #fff;
			border-radius: 20rpx;
			padding: 40rpx 30rpx 30rpx;
		}

		&_box {
			background: #fff;
			border-radius: 20rpx;
			margin-top: 30rpx;
			padding: 30rpx;
		}

		&_choose_link {
			min-width: 118rpx;
			height: 57rpx;
			line-height: 57rpx;
			text-align: center;
			font-size: 28rpx;
			font-weight: 400;
			color: #FFFFFF;
			background: #404243;
			border-radius: 10rpx;
			display: inline-block;
			vertical-align: top;
			padding: 0 15rpx;
			margin-left: 25rpx;
			margin-bottom: 20rpx;

			&.ac {
				color: #0E0E0F;
				background: #FFCF00;
			}
		}

		// &_choose_link+&_choose_link {
		// 	margin-left: 25rpx;
		// }

		&_pay_item+&_pay_item {
			margin-top: 30rpx;
		}

		&_pay_item {
			width: 640rpx;
			height: 110rpx;
			background: #E8EEFE;
			border-radius: 15rpx;

			&.ac {
				border: 2rpx solid #FFCF00;
			}
		}

		&_foot_nav {
			width: 700rpx;
			height: 125rpx;
			background: #fff;
			box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.2);
			border-radius: 20rpx;
			margin-bottom: 40rpx;

			&_btn {
				width: 245rpx;
				height: 125rpx;
				line-height: 125rpx;
				text-align: center;
				font-size: 30rpx;
				font-weight: 400;
				color: #0E0E0F;
				background: #FFCF00;
				border-radius: 0rpx 20rpx 20rpx 0rpx;
			}
		}
	}

	.bb {
		border-bottom: 1px solid #434343;
	}
	input,
	textarea {
		background-color: #E8EEFE;
		color: #333;
		border: 1px solid #E8ffff;
		border-radius: 12rpx;
		width: 92%;
		padding: 24rpx;
		font-size: 28rpx;
		box-sizing: content-box;
		transition: 0.2s;
		margin-top:20rpx
	}
</style>